<template>
    <div>
      <quill-editor v-model="contents" :options="editorOption" ref="myQuillEditor"  @change="onEditorChange($event)"></quill-editor>
      <s-file-image class="quill-upload" @confirm_imsge="confi_imsge"></s-file-image>
    </div>
</template>
<script>
import sFileImage from '../s-file-image/s-file-image.vue'
export default {
  name: 'sFileImage',
  components: {
    's-file-image': sFileImage
  },
  data () {
    return {
      editorOption: {
        placeholder: '请输入...',
        theme: 'snow',
        modules: { // 工具栏设置
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
              ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
              [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
              [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
              [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
              [{ indent: '-1' }, { indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
              [{ direction: 'rtl' }], // 文本方向-----[{'direction': 'rtl'}]
              [{ size: ['small', false, 'large', 'huge'] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
              [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
              [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
              [{ font: [] }], // 字体种类-----[{ font: [] }]
              [{ align: [] }], // 对齐方式-----[{ align: [] }]
              ['clean'], // 清除文本格式-----['clean']
              ['link', 'image', 'video'] // 链接、图片、视频-----['link', 'image', 'video']
            ],
            handlers: {
              image: function (value) {
                if (value) {
                  document.querySelector('.quill-upload input').click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      },
      contents: ''
    }
  },
  props: {
    // 图片路径
    content: {
      type: String,
      default: ''
    }
  },
  watch: {
    content: function (val) { // 监听props中的属性
      this.contents = val
    }
  },
  created () {
    this.contents = this.content
  },
  methods: {
    confi_imsge (res) {
      const quill = this.$refs.myQuillEditor.quill
      const length = quill.getSelection().index
      // 插入图片 res.url为服务器返回的图片地址
      quill.insertEmbed(length, 'image', res.url)
    },
    onEditorChange ({ editor, html, text }) {
      this.$emit('confirm_content', html)
    }
  }
}
</script>
